<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="show"
    :width="width"
    top="15vh"
    :modal-append-to-body="false"
    @closed="onclick"
  >
    <slot>
      <slot name="body">empty2</slot>
    </slot>

  </el-dialog>
</template>

<script>
export default {
    name: 'Dialog',
    // eslint-disable-next-line vue/require-prop-types
    props: {
        width: {
            type: String,
            default: '80%'
        },
        // height: {
        //     type: String,
        //     default: '40%'
        // },
        src: {
            type: String,
            default: ''
        }
    },
    data() {
        return { show: true }
    },
    created() {
        console.log(this.show)
    },

    methods: {
        onclick() {
            this.$store.dispatch('dlgShow', false)
        }
    }
}
</script>

<style lang="scss">
  @import "@/assets/styles/variables";

  .v-modal {
    //  background-color: rgba(0,0,0,0.5);
  }

  .el-dialog__wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .el-dialog {
      border: 1px solid #4f6f93;
      padding: 8px 8px 8px 4px;
      position: relative;
      z-index: 999;
      clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
      background-color: rgba(0, 0, 0, 0.5);
      height: 70%;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-image: linear-gradient(225deg,
            #4f6f93 0,
            #4f6f93 16px,
            rgba(0, 18, 42, 0.8) 16px);
      }

      &::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: url("../../assets/img/left.png"),
          url("../../assets/img/right.png");
        background-repeat: no-repeat;
        background-size: 50px 50px, 150px 42px;
        background-position-x: 0, 100%;
        background-position-y: 0, 0;
        z-index: -1;
      }

      .el-dialog__header {
        display: none;
      }

      .el-dialog__body {
        width: 100%;
        height: 100%;
        // overflow-y: auto;
        box-sizing: border-box;
        padding: 0 20px 10px 10px;
        position: relative;

        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: -1;
          background-image: url("../../assets/img/leftBottom.png"),
            url("../../assets/img/rightTop.png");
          background-repeat: no-repeat;
          background-size: 150px 150px, 150px 150px;
          background-position-x: 0, calc(100% - 2px);
          background-position-y: 100%, 4px;
          // border: 1px solid #40d0fc;
          // border-width: 1px;
          // border-style: solid;
          // clip-path: polygon(
          //   0 0,
          //   calc(100% - 18px) 0,
          //   100% 18px,
          //   100% 100%,
          //   0 100%
          // );
          // background-image: linear-gradient(
          //     225deg,
          //     transparent 0,
          //     #66ccff 13px,
          //     transparent 13px
          //   ),
          //   radial-gradient(circle, #041f43 0%, #113c5f 100%);
          // border-image: linear-gradient(225deg, #66ccff, transparent,#66ccff ) 1 1;
        }
      }
    }
  }
</style>
